<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <ul id="box"></ul>
    <!-- <script>
        const ul = document.getElementById('box');
        ul.style.display = 'none';
        for (let i = 0; i < 10; i++) {
            const li = document.createElement('li');
            const text = document.createTextNode(i);
            li.appendChild(text);
            ul.appendChild(li);
        }
        ul.style.display = 'block';
    </script> -->

    <!-- <script>
        const ul = document.getElementById('box');
        const fragement = document.createDocumentFragment();//创建虚拟的文档片段
        for (let i = 0; i < 10000; i++) {
            const li = document.createElement('li');
            const text = document.createTextNode(i);
            li.appendChild(text);
            fragement.appendChild(li);
        }
        ul.appendChild(fragement);
    </script> -->

    <script>
      const ul = document.getElementById("box");
      const clone = ul.cloneNode(true); //克隆一份ul
      for (let i = 0; i < 10000; i++) {
        const li = document.createElement("li");
        const text = document.createTextNode(i);
        li.appendChild(text);
        clone.appendChild(li);
      }
      ul.parentNode.replaceChild(clone, ul);
    </script>
  </body>
</html>
